<template>
  <section>
    <!--工具条-->
  <!--   <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.search" placeholder="鉴赏ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col> -->

    <!--列表-->
    <template>
      <el-table type='index' :data="users" highlight-current-row v-loading="loading" style="margin-top:20px;width: 1401px;text-align: center;">
      <el-table-column  header-align="center" type="index"  label="第几次"  width="100">
        </el-table-column>
        <el-table-column  header-align="center" prop="realName" label="专家名字"  width="200">
        </el-table-column>
        <el-table-column  header-align="center" prop="price" label="结算金额" width="300" >
        </el-table-column>
        <el-table-column  header-align="center" prop="settleType" label="结算方式" width="200">
        </el-table-column>
        <el-table-column  header-align="center" label="结算凭证" width="350" >
          <template scope="scope">
            <div class="buuton" v-if='scope.row.path!==""'   @click="lookvoucher(scope.$index,scope.row)">查看凭证</div>
            <div class="buuton"  v-else-if='scope.row.path==""' style="color: #d13535;background: #fff;">暂无凭证</div>
          </template>
        </el-table-column>
        <el-table-column  header-align="center" prop="settleTime" label="结算时间" width="300" >
        </el-table-column>
      </el-table>
    </template>
      <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{total}}</span>条记录</div>
    </el-col>
  </section>
</template>
<script>
  import { sendData,cutString  } from "../../api/api";
  export default {
    data() {
      return {
        filters: {
          search: ''
        },
        id:"",
        loading: false,
        users:[],
        total: 0,
        page: 1,
        dialogVisible: false
      }
    },
    created(){
        this.getparam()

    },
    methods: {
      // 获取或更新路由id
      getparam:function(){
        let id=parseInt(sessionStorage.getItem("recordID"))
        if (id) {
          if (this.$route.params.id&&id!==this.$route.params.id) {
            sessionStorage.setItem("recordID",this.$route.params.id)
              this.id=this.$route.params.id
          }else{
            this.id=id
          }
        }else{
        sessionStorage.setItem("recordID",this.$route.params.id)
          this.id=parseInt(sessionStorage.getItem("recordID"))
      }
      },
      //获取某一个专家结算记录
      getUser: function () { 
        let page=JSON.parse(this.page);
        let params=sendData({url: "profit/list",msg: {id:this.id,page:page,num:10}})
        this.loading = true;
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          var res=cutString(res.bodyText)
          console.log(res)
          this.total=res.msg.total
          this.users = res.msg.expendListRspList
          res.msg.expendListRspList.map(function(v,i){
            v.settleTime=v.settleTime.slice(0,19)
            v.price=(v.price/100).toFixed(2)
            if (v.settleType==1) {
              v.settleType="现金"
            }else if(v.settleType==2){
              v.settleType="转账到银行卡"
            }else if (v.settleType==3) {
              v.settleType="工具转账（微信、支付宝)"
            }else{
              v.settleType="其他"
            }
          })
          this.loading = false;
          console.log(res)
        })
      },
      // 有凭证查看
      lookvoucher(index,row){
        window.open(row.path)
      },
      // 分页请求
      handleCurrentChange(val) {
        console.log(val)
        this.page = val;
        this.getUser();
      }
    },

   watch:{
    // $router:function(){
    //   console.log("ppppppppp")
    // }
  },
    mounted() {
      this.getUser();
    }
  };

</script>

<style scoped>
.all{
  font-size: 16px;
  line-height: 32px;
  color: #666
}
.total{
    padding:0 5px;
    color: #52BAE9;
  }

.buuton{
  padding:3px 5px ;
  background: #20A0FF;
  border-radius: 5px;
  margin: 0 auto;
  width:60px;
  text-align: center;
  cursor: pointer;
  color: #fff;
}
</style>